<template>
  <div class="playpage-lyric" ref="box">
    <ul ref="list" :style="{ transform: `translateY(${-offsetH}px)` }">
      <li
        v-for="(item, index) in parsedLyric"
        :key="index"
        :class="{ active: index === currentLyric.index }"
      >
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "PlayPageLyric",
  components: {},
  created() {
    const { id } = this.currentSongInfo;
    this.getLyric(id);
  },
  data() {
    return {
      lyric: "",
      offsetH: 0,
    };
  },
  methods: {
    // 获取当前音乐歌词
    async getLyric(id) {
      const res = await this.axios.get(`/lyric?id=${id}`);
      this.lyric = res.data.lrc.lyric;

      // 获取歌词下一帧执行
      // $nextTick => DOM更新后的操作
      this.$nextTick(() => {
        let h = Array.from(this.$refs.list.querySelectorAll("li"))
          .slice(0, this.currentLyric.index)
          .reduce((total, element) => total + Number(element.offsetHeight), 0);

        let offsetH;

        // 根容器的高度
        const container_height = this.$refs.box.offsetHeight;

        // ul 的offsetHeight
        const ul_offsetHeight = Number(this.$refs.list.offsetHeight);

        // if (h < container_height / 2) {
        //   offsetH = 0;
        // } else if (h > ul_offsetHeight - container_height / 2) {
        //   offsetH = ul_offsetHeight - container_height / 2;
        // } else {
        //   offsetH = h - container_height / 2;
        // }

        offsetH =
          h < container_height / 2
            ? 0
            : h > ul_offsetHeight - container_height / 2
            ? ul_offsetHeight - container_height / 2
            : h - container_height / 2;

        this.offsetH = offsetH;
      });
    },

    // 转换歌词
    parseLyric(strLyric) {
      return strLyric
        .split("\n")
        .filter((s) => s)
        .map((s) => {
          // 正则匹配
          const yy = s.match(/^\[(\d{2}:\d{2}\.\d{2,3})\](.*)/);
          const timeArr = yy[1].split(":");
          return {
            time: timeArr[0] * 60 + timeArr[1] * 1,
            text: yy[2],
          };
        });
    },

    // 查找歌词
    findLyric(parsedLyric, currentTime) {
      const lts = parsedLyric.filter((o) => o.time < currentTime);
      return {
        index: lts.length - 1,
        lyric: lts[lts.length - 1],
      };
    },
  },
  computed: {
    // 转换歌词
    parsedLyric() {
      return this.parseLyric(this.lyric);
    },

    // 查找当前歌词
    currentLyric() {
      return this.findLyric(this.parsedLyric, this.currentTime);
    },

    ...mapState(["currentTime", "currentSong"]),

    ...mapGetters(["currentSongInfo"]),
  },
  watch: {
    // 歌词滚动
    "currentLyric.index"(n) {
      let h = Array.from(this.$refs.list.querySelectorAll("li"))
        .slice(0, n)
        .reduce(function (total, element) {
          return total + Number(element.offsetHeight);
        }, 0);

      let offsetH;

      // 根容器的高度
      const container_height = this.$refs.box.offsetHeight;

      // ul 的offsetHeight
      const ul_offsetHeight = Number(this.$refs.list.offsetHeight);

      if (h < container_height / 2) {
        offsetH = 0;
      } else if (h > ul_offsetHeight - container_height / 2) {
        offsetH = ul_offsetHeight - container_height / 2;
      } else {
        offsetH = h - container_height / 2;
      }

      this.offsetH = offsetH;
    },

    // 更换音乐,重新获取歌词
    "currentSong.id"(newId) {
      this.getLyric(newId);
    },
  },
};
</script>

<style lang="less" scoped>
.playpage-lyric {
  overflow: hidden;

  ul {
    transition: all 1s;

    li {
      width: 100%;
      text-align: center;
      line-height: 40px;
      color: #707070;
      transition: inherit;
      text-shadow: 0px 0px 1px white;

      &.active {
        color: white;
        font-size: 18px;
      }
    }
  }
}
</style>
